<template>
  <view class="x-select">
    <u-form>
      <u-form-item label="多选" label-position="top" required>
        <x-select :listData="listData"
                  :value.sync="value"
                  :multiple="true"
                  title="请选择"></x-select>
      </u-form-item>
      <u-form-item label="单选" label-position="top" required>
        <x-select :listData="listData"
                  :value.sync="value1"
                  title="请选择"></x-select>
      </u-form-item>
    </u-form>
  </view>
</template>

<script>
import XSelect from '../uni_modules/x-select/components/x-select/x-select';
export default {
  components: {XSelect},
  data() {
    return {
      listData: [
        {value: 'liubei', label: '刘备'},
        {value: 'zhangfei', label: '张飞'},
        {value: 'guangyu', label: '关羽'},
        {value: 'caocao', label: '曹操'},
        {value: 'sunquan', label: '孙权'},
        {value: 'liubei1', label: '刘备1'},
        {value: 'zhangfei1', label: '张飞1'},
        {value: 'guangyu1', label: '关羽1'},
        {value: 'caocao1', label: '曹操1'},
        {value: 'sunquan1', label: '孙权1'},
        {value: 'liubei2', label: '刘备2'},
        {value: 'zhangfei2', label: '张飞2'},
        {value: 'guangyu2', label: '关羽2'},
        {value: 'caocao2', label: '曹操2'},
        {value: 'sunquan2', label: '孙权2'},
        {value: 'liubei3', label: '刘备3'},
        {value: 'zhangfei3', label: '张飞3'},
        {value: 'guangyu3', label: '关羽3'},
        {value: 'caocao3', label: '曹操3'},
        {value: 'sunquan3', label: '孙权3'},
        {value: 'liubei4', label: '刘备4'},
        {value: 'zhangfei4', label: '张飞4'},
        {value: 'guangyu4', label: '关羽4'},
        {value: 'caocao4', label: '曹操4'},
        {value: 'sunquan4', label: '孙权4'}
      ],
      value: [],
      value1: [],
    };
  }
};
</script>

<style scoped lang="scss">
  .x-select{
    padding: 30rpx;
  }
</style>


